<template>
  <el-date-picker
    :date-value="dateValue"
    v-model="value"
    :picker-options="pickerOptions"
    type="daterange"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    clearable
    @change="getDate"
  />
</template>
<script>
export default {
  name: 'DateSelect',
  model: {
    prop: 'dateValue'
  },
  props: {
    dateValue: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date(new Date().setHours(0, 0, 0, 0) - 1000)
              const start = new Date(
                new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(1)
              start.setHours(0)
              start.setSeconds(0)
              start.setMinutes(0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上月',
            onClick(picker) {
              const date1 = new Date()
              date1.setDate(1)
              date1.setHours(0)
              date1.setSeconds(0)
              date1.setMinutes(0)
              const end = new Date(date1.getTime() - 1000)
              const start = new Date(end.getTime())
              start.setDate(1)
              start.setHours(0)
              start.setSeconds(0)
              start.setMinutes(0)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: ''
    }
  },
  computed: {},
  watch: {
    dateValue(newVal, oldVal) {
      if (newVal === '' || newVal === undefined || newVal == null) {
        this.value = ''
      }
    }
  },
  mounted() {},
  methods: {
    getDate() {
      // this.dateValue = this.value;
      this.$emit('getDateVal', this.value)
    }
  }
}
</script>

